<template>
    <view class="photo-grid">
        <!-- 显示的照片 -->
        <view class="photo-item" v-for="(item, index) in displayPhotos" :key="index" @tap="onPhotoClick(item, index)">
            <!-- 占位图 -->
            <view class="placeholder" v-if="!item.url">
                <text class="placeholder-text">暂无图片</text>
            </view>

            <!-- 图片 -->
            <image v-else class="photo-image" :src="item.url" mode="aspectFill" />
        </view>

        <!-- 更多照片提示 -->
        <view v-if="hasMore" class="photo-item more-item" @tap="onMoreClick">
            <view class="more-content">
                <text class="more-text">+{{ remainCount }}</text>
                <text class="more-desc">查看更多</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    photos: {
        type: Array,
        default: () => []
    },
    maxCount: {
        type: Number,
        default: 6
    }
})

const emit = defineEmits(['click', 'more'])

// 计算要显示的照片
const displayPhotos = computed(() => {
    return props.photos.slice(0, props.maxCount - (hasMore.value ? 1 : 0))
})

// 是否有更多照片
const hasMore = computed(() => {
    return props.photos.length > props.maxCount
})

// 剩余照片数量
const remainCount = computed(() => {
    return props.photos.length - props.maxCount + 1
})

// 点击照片
const onPhotoClick = (photo, index) => {
    emit('click', {
        photo,
        index,
        photos: props.photos
    })
}

// 点击更多
const onMoreClick = () => {
    emit('more', props.photos)
}
</script>

<style lang="scss" scoped>
.photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;

    .photo-item {
        width: calc((100% - 20rpx) / 3);
        height: 240rpx;
        border-radius: 12rpx;
        overflow: hidden;
        position: relative;
        background: #f5f5f5;

        // 占位图样式
        .placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ccc;
        }
    }
}
</style>